<template>
  <view class="vaccination-container">
    <page-header title="疫苗接种"></page-header>
    
    <!-- 轮播图 -->
    <swiper class="banner-swiper" 
            circular 
            autoplay 
            interval="3000" 
            duration="500" 
            indicator-dots
            indicator-active-color="#ff5500"
            indicator-color="rgba(255, 255, 255, .6)">
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <image :src="item.image" mode="aspectFill" class="banner-image" @tap="handleBannerClick(item)"/>
      </swiper-item>
    </swiper>

    <!-- 疫苗分类 -->
    <view class="category-section">
      <view class="section-title">
        <text>疫苗分类</text>
      </view>
      <view class="category-grid">
        <view 
          class="category-item" 
          v-for="category in vaccineCategories" 
          :key="category.id" 
          @tap="navigateToCategory(category.id, category.name)"
        >
          <view class="category-icon">
            <text class="first-letter">{{ category.name.charAt(0) }}</text>
          </view>
          <text class="category-name">{{ category.name }}</text>
        </view>
      </view>
    </view>

    <!-- 热门疫苗 -->
    <view class="hot-section">
      <view class="section-title">
        <text>热门疫苗</text>
        <text class="more-btn" @tap="goToVaccineList">查看全部</text>
      </view>
      <view class="vaccine-list">
        <view 
          class="vaccine-item" 
          v-for="vaccine in hotVaccines" 
          :key="vaccine.id"
        >
          <view class="vaccine-info">
            <view class="vaccine-header">
              <text class="vaccine-name">{{ vaccine.name }}</text>
              <text class="hot-tag" v-if="vaccine.isHot === 1">热门</text>
            </view>
            <text class="vaccine-desc">{{ vaccine.description }}</text>
            <text class="vaccine-prevention" v-if="vaccine.preventionDescription">
              {{ vaccine.preventionDescription }}
            </text>
            <view class="vaccine-detail">
              <text class="manufacturer" v-if="vaccine.manufacturer">
                生产厂家：{{ vaccine.manufacturer }}
              </text>
              <text class="storage" v-if="vaccine.storageCondition">
                储存条件：{{ vaccine.storageCondition }}
              </text>
            </view>
            <view class="vaccine-bottom">
              <view class="price-box">
                <text class="price">¥{{ vaccine.price }}</text>
                <text class="original-price" v-if="vaccine.originalPrice">¥{{ vaccine.originalPrice }}</text>
              </view>
              <button class="book-btn" @tap.stop="bookVaccine(vaccine)">预约</button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 接种须知 -->
    <view class="notice-section">
      <view class="section-title">
        <text>接种须知</text>
      </view>
      <view class="notice-content">
        <view class="notice-item" v-for="(notice, index) in notices" :key="index">
          <view class="notice-title">
            <text class="notice-icon">{{ notice.icon }}</text>
            <text class="notice-name">{{ notice.title }}</text>
          </view>
          <text class="notice-desc">{{ notice.content }}</text>
        </view>
      </view>
    </view>

    <!-- 接种记录 -->
    <view class="record-section">
      <view class="section-title">
        <text>接种记录</text>
      </view>
      <view class="record-content" v-if="vaccinationRecords.length > 0">
        <view class="record-item" v-for="(record, index) in vaccinationRecords" :key="index">
          <view class="record-left">
            <text class="record-date">{{ record.date }}</text>
            <text class="record-status" :class="record.status">{{ record.statusText }}</text>
          </view>
          <view class="record-right">
            <text class="record-name">{{ record.vaccineName }}</text>
            <text class="record-hospital">{{ record.hospital }}</text>
          </view>
        </view>
      </view>
      <view class="empty-record" v-else>
        <image src="/static/empty-record.png" mode="aspectFit" class="empty-image"></image>
        <text class="empty-text">暂无接种记录</text>
        <button class="add-record-btn" @tap="addVaccinationRecord">添加记录</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getVaccineCategories, getVaccineList, getVaccinesByCategoryId } from '@/api/vaccination'

export default {
  data() {
    return {
      bannerList: [
        {
          id: 1,
          image: '/static/banner1.jpg',
          url: '/pages/vaccination/detail?id=1'
        },
        {
          id: 2,
          image: '/static/banner2.jpg',
          url: '/pages/vaccination/detail?id=2'
        },
        {
          id: 3,
          image: '/static/banner3.jpg',
          url: '/pages/vaccination/detail?id=3'
        }
      ],
      vaccineCategories: [],
      categoryVaccines: [],
      currentCategoryId: null,
      hotVaccines: [],
      notices: [
        {
          icon: '📋',
          title: '接种前准备',
          content: '接种前请保持良好的身体状态，避免疲劳、饥饿。如有发热、急性疾病等情况，应暂缓接种。'
        },
        {
          icon: '⚠️',
          title: '接种禁忌',
          content: '对疫苗成分过敏者、免疫功能低下者、患有严重疾病者应咨询医生后再决定是否接种。'
        },
        {
          icon: '🕒',
          title: '接种后观察',
          content: '接种后需在接种点观察30分钟，如出现不适症状应立即告知医护人员。'
        }
      ],
      vaccinationRecords: [
        {
          id: 1,
          date: '2024-02-15',
          vaccineName: '四价流感疫苗',
          hospital: '市第一人民医院',
          status: 'completed',
          statusText: '已完成'
        },
        {
          id: 2,
          date: '2024-03-20',
          vaccineName: '新冠疫苗(第一剂)',
          hospital: '社区卫生服务中心',
          status: 'completed',
          statusText: '已完成'
        },
        {
          id: 3,
          date: '2024-04-10',
          vaccineName: '新冠疫苗(第二剂)',
          hospital: '社区卫生服务中心',
          status: 'upcoming',
          statusText: '待接种'
        }
      ]
    }
  },
  
  onLoad() {
    this.checkLoginStatus()
    this.fetchVaccineCategories()
    this.fetchHotVaccines()
  },
  
  methods: {
    checkLoginStatus() {
      const userInfo = uni.getStorageSync('userInfo')
      if (!userInfo) {
        this.vaccinationRecords = []
      }
    },
    
    fetchVaccineCategories() {
      getVaccineCategories().then(response => {
        this.vaccineCategories = response
      }).catch(error => {
        console.error('获取疫苗分类失败：', error)
        uni.showToast({
          title: '获取疫苗分类失败',
          icon: 'none'
        })
      })
    },
    
    fetchHotVaccines() {
      const params = {
        pageNum: 1,
        pageSize: 3,
        isHot: 1  // 获取热门疫苗
      }
      
      getVaccineList(params).then(response => {
        if (response.code === 200 && response.data && response.data.list) {
          // 处理返回的疫苗数据
          this.hotVaccines = response.data.list.map(item => ({
            id: item.id,
            name: item.name,
            description: item.description,
            preventionDescription: item.preventionDescription,
            price: item.price,
            originalPrice: item.originalPrice,
            manufacturer: item.manufacturer,
            storageCondition: item.storageCondition,
            isHot: item.isHot
          }))
          console.log('热门疫苗数据:', this.hotVaccines)
        } else {
          throw new Error(response.errorMessage || '获取热门疫苗失败')
        }
      }).catch(error => {
        console.error('获取热门疫苗失败：', error)
        uni.showToast({
          title: '获取热门疫苗失败',
          icon: 'none'
        })
      })
    },
    
    async navigateToCategory(categoryId, categoryName) {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const response = await getVaccinesByCategoryId(categoryId)
        
        if (response.code === 200 && response.data) {
          // 跳转到booking页面，并传递分类信息和疫苗列表数据
          uni.navigateTo({
            url: `/pages/vaccination/booking?categoryId=${categoryId}&categoryName=${categoryName}`,
            success: () => {
              // 将数据存储到页面实例中
              const pages = getCurrentPages()
              const bookingPage = pages[pages.length - 1]
              if (bookingPage) {
                bookingPage.$vm.vaccineList = response.data
                bookingPage.$vm.categoryName = categoryName
              }
            }
          })
        } else {
          throw new Error(response.errorMessage || '获取数据失败')
        }
      } catch (error) {
        console.error('获取分类疫苗失败：', error)
        uni.showToast({
          title: '获取分类疫苗失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    goToVaccineList() {
      console.log('点击查看全部')
      
      uni.navigateTo({
        url: '/pages/vaccination/list',
        success: (res) => {
          console.log('跳转成功')
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    viewVaccineDetail(vaccine) {
      uni.navigateTo({
        url: `/pages/vaccination/detail?id=${vaccine.id}`
      })
    },
    
    bookVaccine(vaccine) {
      const userInfo = uni.getStorageSync('userInfo')
      if (!userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }
      
      uni.navigateTo({
        url: `/pages/vaccination/booking?id=${vaccine.id}&name=${vaccine.name}`,
        success: () => {
          // 将数据存储到页面实例中
          const pages = getCurrentPages()
          const bookingPage = pages[pages.length - 1]
          if (bookingPage) {
            bookingPage.$vm.selectedVaccine = vaccine
            bookingPage.$vm.appointmentData.vaccineId = vaccine.id
            bookingPage.$vm.appointmentData.userId = userInfo.id
            bookingPage.$vm.appointmentData.appointmentDate = bookingPage.$vm.formatDate(new Date())
          }
        }
      })
    },
    
    addVaccinationRecord() {
      const userInfo = uni.getStorageSync('userInfo')
      if (!userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }
      
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },
    
    handleBannerClick(banner) {
      if (banner.url) {
        uni.navigateTo({
          url: banner.url
        })
      }
    }
  }
}
</script>

<style lang="scss">
.vaccination-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
  
  .banner-swiper {
    width: 100%;
    height: 300rpx;
    
    .banner-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    
    text {
      font-size: 32rpx;
      color: #333;
      font-weight: bold;
    }
    
    .more-btn {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .category-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .category-grid {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20rpx 30rpx;
      
      .category-item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30rpx;
        
        .category-icon {
          width: 100rpx;
          height: 100rpx;
          margin-bottom: 10rpx;
          border-radius: 50%;
          background: linear-gradient(135deg, #ff9500, #ff5500);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4rpx 8rpx rgba(255, 85, 0, 0.2);
          
          .first-letter {
            color: #fff;
            font-size: 40rpx;
            font-weight: bold;
          }
        }
        
        .category-name {
          font-size: 26rpx;
          color: #333;
          margin-top: 12rpx;
        }
        
        &:active {
          .category-icon {
            transform: scale(0.95);
            transition: transform 0.2s;
          }
        }
      }
    }
  }
  
  .hot-section {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    
    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10rpx 20rpx;
      
      text {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .more-btn {
        font-size: 26rpx;
        color: #999;
        font-weight: normal;
      }
    }
    
    .vaccine-list {
      .vaccine-item {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .vaccine-info {
          .vaccine-header {
            display: flex;
            align-items: center;
            margin-bottom: 16rpx;
            
            .vaccine-name {
              font-size: 32rpx;
              color: #333;
              font-weight: bold;
            }
            
            .hot-tag {
              margin-left: 12rpx;
              padding: 4rpx 12rpx;
              font-size: 22rpx;
              color: #ff5500;
              background-color: #fff7f5;
              border-radius: 4rpx;
            }
          }
          
          .vaccine-desc {
            font-size: 28rpx;
            color: #666;
            margin-bottom: 12rpx;
            line-height: 1.4;
          }
          
          .vaccine-prevention {
            font-size: 26rpx;
            color: #999;
            margin-bottom: 16rpx;
            line-height: 1.4;
          }
          
          .vaccine-detail {
            margin-bottom: 20rpx;
            
            .manufacturer, .storage {
              display: block;
              font-size: 26rpx;
              color: #666;
              margin-bottom: 8rpx;
            }
          }
          
          .vaccine-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .price-box {
              .price {
                font-size: 36rpx;
                color: #ff5500;
                font-weight: bold;
              }
              
              .original-price {
                font-size: 24rpx;
                color: #999;
                text-decoration: line-through;
                margin-left: 12rpx;
              }
            }
            
            .book-btn {
              width: 160rpx;
              height: 64rpx;
              line-height: 64rpx;
              background-color: #ff5500;
              color: #fff;
              font-size: 28rpx;
              border-radius: 32rpx;
              padding: 0;
            }
          }
        }
      }
    }
  }
  
  .notice-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .notice-content {
      padding: 0 30rpx 30rpx;
      
      .notice-item {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .notice-title {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          
          .notice-icon {
            margin-right: 10rpx;
            font-size: 32rpx;
          }
          
          .notice-name {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
          }
        }
        
        .notice-desc {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }
  
  .record-section {
    background-color: #fff;
    
    .record-content {
      padding: 0 30rpx 30rpx;
      
      .record-item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .record-left {
          width: 180rpx;
          margin-right: 30rpx;
          
          .record-date {
            font-size: 26rpx;
            color: #333;
            display: block;
            margin-bottom: 10rpx;
          }
          
          .record-status {
            display: inline-block;
            padding: 4rpx 12rpx;
            font-size: 22rpx;
            border-radius: 4rpx;
            
            &.completed {
              background-color: #e6f7ff;
              color: #1890ff;
            }
            
            &.upcoming {
              background-color: #fff7e6;
              color: #fa8c16;
            }
          }
        }
        
        .record-right {
          flex: 1;
          
          .record-name {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 10rpx;
            display: block;
          }
          
          .record-hospital {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
    
    .empty-record {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60rpx 0;
      
      .empty-image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 30rpx;
      }
      
      .empty-text {
        font-size: 28rpx;
        color: #999;
        margin-bottom: 30rpx;
      }
      
      .add-record-btn {
        width: 300rpx;
        height: 80rpx;
        line-height: 80rpx;
        background-color: #ff5500;
        color: #fff;
        font-size: 28rpx;
        border-radius: 40rpx;
      }
    }
  }
}
</style> 